<template>
  <div class="dashboard-editor-container" style="padding: 15px;background: #f6f8f9;">
    <div style="width: 100%;">
    </div>
    <el-card>
      <span style="margin:0 15px 15px 0;font-size: 20px;font-weight: 700;">实例列表</span>
      <div style="font-size: 14px;margin-top: 15px;margin-bottom: 15px;width: 100%;">
        <el-row>
          <el-col :xs="24" :md="24" style="padding-top: 5px;font-size: 15px;color: #999;">
            <div style="display: inline-block;">
              实例ID:<el-input v-model="queryList.id" style="width: 220px;" placeholder="请输入实例Id" clearable></el-input>
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--            <div style="display: inline-block;margin-left: 15px;">-->
<!--              实例国家:-->
<!--              <el-select v-model="queryList.country" style="width: 220px;" filterable clearable  placeholder="请选择实例国家">-->
<!--                <el-option-->
<!--                  v-for="item in instanceCountry"-->
<!--                  :key="item.country_code"-->
<!--                  :label="item.country+item.country_cn+item.country_code"-->
<!--                  :value="item.country_code">-->
<!--                  <span style="float: left">-->
<!--                    <img style="width: 20px;height: 15px;" :src="'https://cdn.bootcdn.net/ajax/libs/flag-icons/6.6.4/flags/4x3/'+item.country_code_lower+'.svg'" />-->
<!--                    {{ item.country }}-{{ item.country_cn }}-->
<!--                  </span>-->
<!--                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.country_code }}</span>-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </div>-->
          </el-col>
<!--          <el-col :xs="12" :md="2" style="padding-top: 5px;margin-top: 15px;">-->
<!--            <span style="font-size: 15px;color: #999;">实例状态:</span>-->
<!--          </el-col>-->
<!--          <el-col :xs="24" :md="22" style="margin-top: 15px;">-->
<!--            <el-row>-->
<!--              <el-tag style="border-radius: 15px;" @click="queryList.status='all'" :effect="queryList.status == 'all'?'dark':null">-->
<!--                <i class="wshub wshub-robot"></i>-->
<!--                全部-->
<!--              </el-tag>-->
<!--              <el-divider direction="vertical"></el-divider>-->
<!--              <el-tag style="border-radius: 15px;"  @click="queryList.status=1" :effect="queryList.status == 1?'dark':null">-->
<!--                <i class="wshub wshub-yunhang"></i>-->
<!--                实例运行中-->
<!--              </el-tag>-->
<!--              <el-divider direction="vertical"></el-divider>-->
<!--              <el-tag style="border-radius: 15px;"  @click="queryList.status=0" :effect="queryList.status == 0?'dark':null">-->
<!--                <i class="wshub wshub-QRcode"></i>-->
<!--                设备扫码中-->
<!--              </el-tag>-->
<!--              <el-divider direction="vertical"></el-divider>-->
<!--              <el-tag style="border-radius: 15px;"  @click="queryList.status=2" :effect="queryList.status == 2?'dark':null">-->
<!--                <i class="wshub wshub-kongxian"></i>-->
<!--                手机端登录中-->
<!--              </el-tag>-->
<!--              <el-divider direction="vertical"></el-divider>-->
<!--              <el-tag style="border-radius: 15px;" @click="queryList.status=-1" :effect="queryList.status == -1?'dark':null">-->
<!--                <i class="wshub wshub-lixian"></i>-->
<!--                已断开-->
<!--              </el-tag>-->
<!--              <el-divider direction="vertical"></el-divider>-->
<!--              <el-tag style="border-radius: 15px;" @click="queryList.status=-3"  :effect="queryList.status == -3?'dark':null">-->
<!--                <i class="wshub wshub-guzhang"></i>-->
<!--                实例重连中-->
<!--              </el-tag>-->
<!--              <el-divider direction="vertical"></el-divider>-->
<!--              <el-tag style="border-radius: 15px;" @click="queryList.status=-4"  :effect="queryList.status == -4?'dark':null">-->
<!--                <i class="wshub wshub-switch"></i>-->
<!--                实例已停止-->
<!--              </el-tag>-->
<!--              <el-divider direction="vertical"></el-divider>-->
<!--              <el-tag style="border-radius: 15px;" @click="queryList.status=-5"  :effect="queryList.status == -5?'dark':null">-->
<!--                <i class="wshub wshub-guanji"></i>-->
<!--                实例休眠中-->
<!--              </el-tag>-->
<!--            </el-row>-->
<!--          </el-col>-->
        </el-row>
        <el-row :gutter="20" type="flex" justify="end" style="margin-top: 10px;">
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <el-button @click="getDataList"><i class="el-icon-refresh"/>{{ $t('v520.refreshData') }}</el-button>
          </el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <el-button type="primary" @click="queryList.page = 1;getDataList();">
              <i class="el-icon-search"></i>
              搜索
            </el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-button v-if="selectIds.length > 0" type="primary" size="mini" @click="changeCountryIds" round>
      <i class="wshub wshub-RectangleCopy6"></i>
      切换实例国家
    </el-button>
    &nbsp;&nbsp;&nbsp;
    <el-button v-if="selectIds.length > 0" size="mini" @click="changeLabels" round>
      <i class="wshub wshub-biaoqian1"></i>
      切换实例标签
    </el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        :label="$t('whatsApp.id')"
        width="90"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        :label="$t('whatsApp.name')"
      >
        <template slot-scope="scope">
          {{ scope.row.name }} {{scope.row.wa_name != '' && scope.row.wa_name != null ?('('+scope.row.wa_name+')'):''}}
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        :label="$t('whatsApp.status')"
        width="130"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == -5" type="warning" effect="plain">
            <i class="wshub wshub-guanji"></i>
            实例休眠中
          </el-tag>
          <el-tag v-if="scope.row.status == -4" type="info">
            <i class="wshub wshub-switch"></i>
            {{ $t('whatsApp.status_d4') }}
          </el-tag>
          <el-tag v-if="scope.row.status == -3" type="warning">
            <i class="el-icon-loading"></i>
            {{ $t('whatsApp.status_d3') }}
          </el-tag>
          <el-tag v-if="scope.row.status == -2" type="warning">
            <i class="wshub wshub-guzhang"></i>
            {{ $t('whatsApp.status_d2') }}
          </el-tag>
          <el-tag v-if="scope.row.status == -1" type="danger">
            <i class="wshub wshub-lixian"></i>
            {{ $t('whatsApp.status_d1') }}
          </el-tag>
          <el-tag v-if="scope.row.status == 0">
            <i class="wshub wshub-QRcode"></i>
            {{ $t('whatsApp.status_0') }}
          </el-tag>
          <el-tag v-if="scope.row.status == 2">
            <i class="wshub wshub-kongxian"></i>
            {{ $t('whatsApp.status_2') }}
          </el-tag>
          <el-tag v-if="scope.row.status == 3" type="warning" >{{ $t('whatsApp.status_3') }}</el-tag>
          <el-tag v-if="scope.row.status == 1" type="success">
            <i class="wshub wshub-yunhang"></i>
            {{ $t('whatsApp.status_1') }}
          </el-tag>
<!--          <template v-if="scope.row.type == 0 || scope.row.type == 3 ">-->
<!--            <el-tag v-if="scope.row.status == 1 && scope.row.type == 3" size="mini" type="warning">-->
<!--              拉群受限实例-->
<!--            </el-tag>-->
<!--            <el-tag v-if="scope.row.status == 1 && scope.row.lock_send == 1" size="mini" type="warning">-->
<!--              锁定发送-->
<!--            </el-tag>-->
<!--            <el-tag v-if="scope.row.status == 1 && scope.row.lock_send == 1" size="mini" @click="unlock(scope.row)">-->
<!--              <i class="wshub wshub-jiesuo"></i>手动解锁-->
<!--            </el-tag>-->
<!--            <el-tag v-if="scope.row.status == 1 && scope.row.lock_send == 0" size="mini" @click="lock(scope.row)">-->
<!--              手动锁定-->
<!--            </el-tag>-->
<!--            <el-tag v-if="scope.row.status == 1 && scope.row.lock_send == 0" size="mini" type="primary">-->
<!--              当前待送达:{{scope.row.wait_receive}}-->
<!--            </el-tag>-->
<!--          </template>-->
<!--          <template v-if="scope.row.type == 2 && scope.row.status == 1 ">-->
<!--            <el-tag size="mini" type="warning">-->
<!--              群主号-->
<!--            </el-tag>-->
<!--          </template>-->
        </template>
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="send_num"-->
<!--        :label="$t('whatsApp.send_num')"-->
<!--        width="120"-->
<!--      >-->
<!--        <template slot-scope="scope">-->
<!--          <span style="font-size: 18px;color: #1e7e34;">-->
<!--            {{scope.row.send_num}}-->
<!--          </span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column
        prop="last_start_time"
        width="160"
        :label="$t('whatsApp.last_start_time')"
      >
      </el-table-column>
      <el-table-column
        prop="country"
        label="手机号"
        width="160"
      >
        <template slot-scope="scope">
          <template v-if="scope.row.status != -4">
            <span style="color: #999;font-size: 12px;">
              {{scope.row.phone == ''?'复用或待取号':scope.row.phone}}
            </span>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="status_time"
        :label="$t('whatsApp.status_time')"
        width="160"
      >
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="last_check_time"-->
<!--        width="160"-->
<!--        :label="$t('whatsApp.last_check_time')"-->
<!--      >-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="proxy"-->
<!--        :label="$t('whatsApp.proxy')"-->
<!--        width="160"-->
<!--      >-->
<!--        <template slot-scope="scope">-->
<!--          <span-->
<!--            style="font-size: 9px;"-->
<!--            v-if="scope.row.proxy_url && scope.row.proxy_url != undefined  && scope.row.proxy_url !== null && scope.row.proxy_url !== '' "-->
<!--          >-->
<!--            {{ scope.row.proxy_url }}-->
<!--          </span>-->
<!--          <br />-->
<!--          <span-->
<!--            style="font-size: 9px;"-->
<!--            v-if="scope.row.proxy_auth && scope.row.proxy_auth != undefined && scope.row.proxy_auth !== null && scope.row.proxy_auth !== '' "-->
<!--          >-->
<!--            {{ scope.row.proxy_auth }}-->
<!--          </span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column
        prop="createtime"
        :label="$t('v520.createTime')"
        width="160"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        :label="$t('v520.operate')"
        width="190"
      >
        <template slot-scope="scope">
<!--          <router-link :to="'/whatsapp/info/'+scope.row.id">-->
<!--            <el-button type="primary" size="mini" plain>-->
<!--              <i class="wshub wshub-icon-xiangmu"></i>-->
<!--              {{ $t('whatsApp.detail') }}-->
<!--            </el-button>-->
<!--          </router-link>-->
          &nbsp;&nbsp;
<!--          <el-dropdown @command="handleMore">-->
<!--            <span class="el-dropdown-link">-->
<!--              {{ $t('whatsApp.more') }}-->
<!--              <i class="wshub wshub-xiangxia"></i>-->
<!--            </span>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              <el-dropdown-item  :command="beforeHandleCommand('configure_proxy',scope)">-->
<!--                <i class="el-icon-link"></i>-->
<!--                {{ $t('whatsApp.configProxy') }}-->
<!--              </el-dropdown-item>-->
<!--              <el-dropdown-item  :command="beforeHandleCommand('change_name',scope)">-->
<!--                <i class="el-icon-edit-outline"></i>-->
<!--                {{ $t('whatsApp.changeName') }}-->
<!--              </el-dropdown-item>-->
<!--              <el-dropdown-item  :command="beforeHandleCommand('change_country',scope)">-->
<!--                <i class="el-icon-edit"></i>-->
<!--                {{ $t('whatsApp.changeCountry') }}-->
<!--              </el-dropdown-item>-->
<!--              <el-dropdown-item  :command="beforeHandleCommand('kill',scope)">-->
<!--                <i class="wshub wshub-icon-guanbi"></i>-->
<!--                杀死实例-->
<!--              </el-dropdown-item>-->
<!--              <el-dropdown-item  :command="beforeHandleCommand('sleep',scope)">-->
<!--                <i class="wshub wshub-guanji"></i>-->
<!--                休眠-->
<!--              </el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->
          <!--          <el-button type="text" size="small">编辑</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <div style="width: 100%;text-align: right;padding-right: 20px;">
      <el-pagination
        background
        layout="total,prev, pager, next"
        :page-size="20"
        :current-page.sync="queryList.page"
        :total="total"
        @current-change="getDataList()"
      >
      </el-pagination>
    </div>

    <el-dialog title="Proxy" :width="dialogWidth" :visible.sync="dialogFormVisible">
      <el-form :model="proxyForm">
        <el-form-item label="Url" label-width="140">
          <el-input v-model="proxyForm.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="Auth" label-width="140">
          <el-input v-model="proxyForm.auth" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitProxy">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getList,changeProxy,changeName,changeDeviceCountry,unlockSend,lockSend,kill,sleepInstance,instanceOpearByCountry,changeDeviceLabel } from '@/api/whatsapp'
import { getConfigCountryList } from '@/api/common'
import { Loading } from 'element-ui';

export default {
  name: 'whatsappIndex',
  created() {
    this.getDataList()
    this.setDialogWidth()
    getConfigCountryList().then(res => {
      if(res.code == 0){
        this.instanceCountry = res.data;
      }
    })
  },
  mounted() {
    if(this.timer == null){
      this.timer = window.setInterval(this.getDataListSilence, 10000);
    }
    document.addEventListener('visibilitychange', this.handleVisiable)
    window.onresize = () => {
      return (() => {
        this.setDialogWidth()
      })()
    }
  },
  beforeDestroy() {
    window.clearInterval(this.timer);
    this.timer = null;
  },
  destroyed(){
    document.removeEventListener('visibilitychange', this.handleVisiable)
  },
  data() {
    return {
      traffic_type:0,
      trafficList:[],
      timer:null,
      work:1,
      total: 0,
      allowList:[],
      queryList: {
        id:'',
        status:'1',
        limit: 20,
        page: 1,
        country: ''
      },
      changeCountry:false,
      instanceCountry:[],
      dialogWidth: '600px',
      logLoadding: false,
      tableData: [],
      dialogFormVisible:false,
      proxyForm:{
        id:0,
        url:'',
        auth:''
      },
      changeName:false,
      changeNameForm:{
        id:0,
        name:''
      },
      changeCountryForm:{
        id:0,
        country:''
      },
      importProxy:false,
      proxyFileList:[],
      importProxyUrl: process.env.VUE_APP_BASE_API + '/whatsapp/importProxy',
      options:[
        {label:'全部',value:'all'},
        {label:'已登录',value:1},
        {label:'等待手机端登录',value:2},
        {label:'手机扫码中',value:0},
        {label:'已断开',value:-1},
        {label:'断开中',value:-2},
        {label:'连接中',value:-3},
        {label:'已停止',value:-4},
        {label:'实例预分配',value:3}
      ],
      uploadData:{
        country:"IN"
      },
      countrys:[
        {label:'印度',value:'IN'},
        {label:'土耳其',value:'TR'},
        {label:'德国',value:'DE'},
        {label:'法国',value:'FR'},
        {label:'英国',value:'GB'},
        {label:'罗马尼亚',value:'RO'}
      ],
      showProxy:false,
      workInfo:{
        total:0,
        start:0,
        end:0
      },
      showAllow:false,
      ipaddress:'',
      total_traffic:0,
      total_traffic_title:'0B',
      proxy_deny:false,
      selectIds:[],
      sleepOrUpDialogFormVisible:false,
      sleepOrUpForm:{
        type:0,
        country:'IN'
      }
    }
  },
  methods: {
    setDialogWidth() {
      var val = document.body.clientWidth
      const def = 600
      if (val < def) {
        this.dialogWidth = '100%'
      } else {
        this.dialogWidth = def + 'px'
      }
    },
    getDataList() {
      const loading = this.$loading({
        lock: true,
        text: this.$t('v520.getting'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getList(this.queryList).then(res => {
        loading.close()
        this.tableData = res.data.rows
        this.total = res.data.total
      }).catch(e => {
        loading.close()
        this.$message.error('请求失败')
      })
    },
    getDataListSilence() {
      if(this.selectIds.length == 0){
        getList(this.queryList).then(res => {
          this.tableData = res.data.rows
          this.total = res.data.total
        }).catch(e => {})
      }
    },
    beforeHandleCommand(command,scope){
      return {
        command:command,
        scope:scope
      }
    },
    handleMore(command) {
      switch (command.command) {
        case 'configure_proxy':
          this.selectId = command.scope.row.id;
          this.proxyForm.id = command.scope.row.id;
          if(command.scope.row.proxy_url){
            this.proxyForm.url = command.scope.row.proxy_url;
          }else{
            this.proxyForm.url = '';
          }
          if(command.scope.row.proxy_auth){
            this.proxyForm.auth = command.scope.row.proxy_auth;
          }else{
            this.proxyForm.auth = '';
          }
          this.dialogFormVisible = true;
          break
        case 'change_name':
          this.selectId = command.scope.row.id;
          this.changeNameForm.id = command.scope.row.id;
          this.changeNameForm.name = command.scope.row.name;
          this.changeName = true;
          break
        case 'change_country':
          this.selectIds = [];
          this.selectId = command.scope.row.id;
          this.changeCountryForm.id = command.scope.row.id;
          this.changeCountryForm.country = command.scope.row.country;
          this.changeCountry = true;
          break
        case 'kill':
          kill({id:command.scope.row.id}).then(res =>{
            if(res.code == 0){
              this.$notify.success({title:'操作成功',message:'已成功杀死实例'});
              this.getDataList();
            }else{
              this.$message.error(res.msg);
            }
          });
          break;
        case 'sleep':
          sleepInstance({id:command.scope.row.id}).then(res =>{
            if(res.code == 0){
              this.$notify.success({title:'操作成功',message:'实例已休眠'});
              this.getDataList();
            }else{
              this.$message.error(res.msg);
            }
          });
          break;
      }
    },
    submitProxy(){
      let loadingInstance1 = Loading.service({ fullscreen: true });
      changeProxy(this.proxyForm).then(res => {
        loadingInstance1.close();
        if(res.code == 0){
          this.dialogFormVisible = false;
          this.$message.success('变更成功');
          this.getDataList();
        }else{
          this.$message.error(res.msg);
        }
      }).catch(e => {
        this.$message.error('请求发起失败,请重试');
      });
    },
    submitName(){
      const loadingInstance1 = Loading.service({ fullscreen: true });
      changeName(this.changeNameForm).then(res => {
        loadingInstance1.close();
        if(res.code == 0){
          this.changeName = false;
          this.$message.success('变更成功');
          this.getDataList();
        }else{
          this.$message.error(res.msg);
        }
      }).catch(e => {
        this.$message.error('请求发起失败,请重试');
      });
    },
    submitCountry(){
      const loadingInstance1 = Loading.service({ fullscreen: true });
      changeDeviceCountry(this.changeCountryForm).then(res => {
        loadingInstance1.close();
        if(res.code == 0){
          this.changeCountry = false;
          this.$message.success('变更成功');
          this.getDataList();
        }else{
          this.$message.error(res.msg);
        }
      }).catch(e => {
        this.$message.error('请求发起失败,请重试');
      });
    },
    checkProxy(response, file, fileList){
      if(response.code == 0){
        this.$message.success('已导入成功');
        this.$refs.uploadproxy.clearFiles();
        this.importProxy = false;
      }else{
        this.$message.error(response.msg);
        this.$refs.uploadproxy.clearFiles();
      }
    },
    openProxyDialog(){
      const loadingInstance1 = Loading.service({ fullscreen: true });
      getWork().then(res => {
        loadingInstance1.close();
        if(res.code == 0){
          this.workInfo = res.data;
          this.showProxy = true;
        }else{
          this.$message.error(res.msg);
        }
      });
      getPortTraffic({type:this.traffic_type}).then(res => {
        if(res.code == 0){
          this.trafficList = res.data.list;
          this.total_traffic = res.data.total_traffic;
          this.total_traffic_title = res.data.total_traffic_title;
          this.proxy_deny = res.data.proxy_deny==1;
        }else{
          this.$notify.error({title:'获取流量失败',message:res.msg});
        }
      });
    },
    trafficTypeChange(){
      getPortTraffic({type:this.traffic_type}).then(res => {
        if(res.code == 0){
          this.trafficList = res.data.list;
          this.total_traffic = res.data.total_traffic;
          this.total_traffic_title = res.data.total_traffic_title;
          this.proxy_deny = res.data.proxy_deny==1;
        }else{
          this.$notify.error({title:'获取流量失败',message:res.msg});
        }
      });
    },
    handleDeny(){
      switchProxyDeny({}).then(res =>{
        if(res.code == 0){
          this.$message.success('切换成功');
          getPortTraffic({type:this.traffic_type}).then(res => {
            if(res.code == 0){
              this.trafficList = res.data.list;
              this.total_traffic = res.data.total_traffic;
              this.total_traffic_title = res.data.total_traffic_title;
              this.proxy_deny = res.data.proxy_deny==1;
            }else{
              this.$notify.error({title:'获取流量失败',message:res.msg});
            }
          });
        }else{
          this.$message.error(res.msg);
        }
      });
    },
    addWork(){
      const loadingInstance1 = Loading.service({ fullscreen: true });
      incrWork({num:this.work}).then(res =>{
        loadingInstance1.close();
        if(res.code == 0){
          this.$message.success('增加成功,5s后生效');
          setTimeout(this.openProxyDialog,5000);
        }else{
          this.$message.error('增加失败');
        }
      });
    },
    delWork(){
      const loadingInstance1 = Loading.service({ fullscreen: true });
      decrWork({num:this.work}).then(res =>{
        loadingInstance1.close();
        if(res.code == 0){
          this.$message.success('减少成功,5s后生效');
          setTimeout(this.openProxyDialog,5000);
        }else{
          this.$message.error('减少失败');
        }
      });
    },
    getIpList(){
      const loadingInstance1 = Loading.service({ fullscreen: true });
      getAllows().then(res => {
        loadingInstance1.close();
        this.allowList = res.data;
        this.showAllow = true;
      });
    },
    addIP(){
      const loadingInstance1 = Loading.service({ fullscreen: true });
      addAllow({ip:this.ipaddress}).then(res =>{
        loadingInstance1.close();
        if(res.code == 0){
          this.$message.success('新增成功')
          this.getIpList();
        }else{
          this.$message.error(res.msg)
        }
      });
    },
    delIP(id){
      const loadingInstance1 = Loading.service({ fullscreen: true });
      delAllow({id:id}).then(res =>{
        loadingInstance1.close();
        this.getIpList();
        if(res.code == 0){
          this.$message.success('删除成功')
        }else{
          this.$message.error(res.msg)
        }
      });
    },
    loadProxys(){
      const loadingInstance1 = Loading.service({ fullscreen: true });
      loadProxy().then(res =>{
        loadingInstance1.close();
        if(res.code == 0){
          this.$message.success('预热成功');
        }else{
          this.$message.success(res.msg);
        }
      });
    },
    handleVisiable(){
      if (e.target.visibilityState === 'visible') {
        if(this.timer == null){
          this.timer = window.setInterval(this.getStatusHandle, 5000)
        }
      } else {
        if(this.timer != undefined && this.timer != null){
          window.clearInterval(this.timer);
        }
      }
    },
    unlock(row){
      unlockSend({id:row.id}).then(res =>{
        if(res.code == 0){
          this.$notify.success({title:'解锁成功',message:'实例已解锁发送功能'});
          this.getDataList();
        }else{
          this.$notify.error({title:'解锁失败',message:res.msg});
        }
      });
    },
    lock(row){
      lockSend({id:row.id}).then(res =>{
        if(res.code == 0){
          this.$notify.success({title:'锁定成功',message:'实例已锁定发送'});
          this.getDataList();
        }else{
          this.$notify.error({title:'锁定失败',message:res.msg});
        }
      });
    },
    handleSelectionChange(val) {
      var ids = [];
      if(val != null && val.length > 0){
         val.forEach((item) =>{
            ids.push(item.id);
         })
      }
      this.selectIds = ids;
    },
    changeCountryIds(){
      this.changeCountry = true;
      this.changeCountryForm.id = this.selectIds;
    },
    changeLabels(){
      this.$prompt('输入标签', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
         changeDeviceLabel({id:this.selectIds,label:value}).then(res => {
           if(res.code == 0){
             this.$message.success('success');
           }else{
             this.$message.error(res.msg);
           }
         });
      }).catch(() => {
        this.$message.info('您取消了标签的编辑');
      });
    },
    submitSleepOrUp(){
      this.sleepOrUpDialogFormVisible = false;
      const loading = this.$loading({ lock: true, text: '发送指令中', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
      instanceOpearByCountry(this.sleepOrUpForm).then(res => {
        loading.close();
        if(res.code == 0){
            this.$notify.success({title:'操作成功',message:'指令已下发,等待稍后执行'});
        }else{
          this.$notify.success({title:'操作失败',message:res.msg});
        }
      }).catch(err => {
          loading.close();
          this.$notify.success({title:'操作失败',message:'请求服务器错误,请重试!'});
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: #FFF;
  min-height: 100vh;
  padding: 40px 40px 0px;

  .pan-info-roles {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
  }

  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;

    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }
}
</style>
